<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="web/include_web::header"></head>
<body>
<nav th:include="web/include_web::nav"  class="navbar navbar-default navbar-custom navbar-fixed-top" ></nav>
<header class="intro-header" style="background-image: url('/img/blog/bg.jpg') ; height: 50px">
	<!--<div class="container">
		<div class="row">
			<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
				<div class="site-heading">
					<h5>BootDo Blog</h5>
					<span class="subheading">bootdo 博客</span>
				</div>
			</div>
		</div>
	</div>-->
</header>

<!-- Main Content -->
<div class="container">
	<div class="row">
		<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
			<div id="incomeNum">
				<div id="incomeNumfluid" class="container-fluid">
					<!--<div class="row">
						<div style="float: left; width: 33%">
							<img style="width: 100px;height: 100px;" src="img/a.jpg" />
							<h3>
								这是一套可视化布局系统.
							</h3>
							<button class="btn" type="button">按钮</button>
						</div>
						<div style="float: left; width: 33%">
							<img style="width: 100px;height: 100px;"  src="img/a.jpg" />
							<h3>
								h3. 这是一套可视化布局系统.
							</h3> <button class="btn" type="button">按钮</button>
						</div>
						<div style="float:left ; width: 33% ">
							<img  style="width: 100px;height: 100px;"  src="img/a.jpg" />
							<h3>
								h3. 这是一套可视化布局系统.
							</h3> <button class="btn" type="button">按钮</button>
						</div>
					</div>
					<div class="row">
						<div style="float: left; width: 33%">
							<img style="width: 100px;height: 100px;"  src="img/a.jpg" />
							<h3>
								这是一套可视化布局系统.
							</h3>
							<button class="btn" type="button">按钮</button>
						</div>
						<div style="float: left; width: 33%">
							<img style="width: 100px;height: 100px;"  src="img/a.jpg" />
							<h3>
								h3. 这是一套可视化布局系统.
							</h3> <button class="btn" type="button">按钮</button>
						</div>
						<div style="float:left ; width: 33% ">
							<img  style="width: 100px;height: 100px;"  src="img/a.jpg" />
							<h3>
								h3. 这是一套可视化布局系统.
							</h3> <button class="btn" type="button">按钮</button>
						</div>
					</div>-->
				</div>
			</div>
			<div class="clearfix">
				<p id="flagLoaded" style="display: none; text-align: center;">已全部加载</p>
				<a id="flagLoad" style="display: none;" class="btn btn-secondary float-right"
				   href="javascript:void(0)" onclick="nextPage()">更早 &rarr;</a>
			</div>
		</div>
	</div>
</div>
</body>
<div th:include="web/include_web::footer"></div>
<script type="text/javascript">
	var total;
	$(function(){
		bindList(0);

	});
	function bindList(offset) {
		$.ajax({
			url:'/web/weblist',
			method:'get',
			dataType:'json',
			success:function(data){
				var total =data.length;
				var htmlText = "";
				for (i = 0; i < total; i++) {
					if(i%3==0&&i!=0){
						htmlText=htmlText+'</div class="row"><div class="row">';
						console.log(i);
					}
					htmlText += '<div style="float: left; width: 33%">';
					htmlText += '<img style="width: 100px;height: 100px;"  src="'+data[i].src+'" />';
					htmlText += '<h3> ';
					htmlText += data[i].carName;
					htmlText += '</h3>';
					htmlText += '<p style="font-size: small">座位数： ';
					htmlText += data[i].carSite;
					htmlText += '座</p>';
					htmlText += '<p>租车价： ';
					htmlText += data[i].rentPrice;
					htmlText += '元/日</p>';
					htmlText += '<button class="btn" onclick="rentcar('+data[i].id+')" type="button">预定</button>';
					htmlText += '</div>';
				}
				htmlText='<div class="row">'+htmlText+'</div class="row">';
				$("#incomeNumfluid").append(htmlText);
			}
		});
	}
	function rentcar(id) {
		layer.open({
			type : 2,
			title : '预定',
			maxmin : true,
			shadeClose : false, // 点击遮罩关闭层
			area : [ '800px', '700px' ],
			content : '/web/rent?carid='+id // iframe的url
		});
	}
</script>


</html>
